<script setup>
import teacher_tabbar from '../teacher_tabbar.vue'
import uniSearchBar from "../../../uni_modules/uni-search-bar/components/uni-search-bar/uni-search-bar.vue";
import img1 from "../../../static/image/img/2130@2x.png";
import {ref} from 'vue';
import uniPopup from "../../../uni_modules/uni-popup/components/uni-popup/uni-popup.vue";

let choice = ref(0);
const choice_1 = () => {
  choice.value = 0
}

const choice_2 = () => {
  choice.value = 1
}

const choice_3 = () => {
  choice.value = 2
}

const choice_4 = () => {
  choice.value = 3
}

const popup = ref()
const isShow = ref(false)
const open = () => {
  // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
  popup.value.open('center')
  isShow.value = true
}

let choi = ref(1);
const popUp = () => {
  if(choi.value == 1){
    choi.value = 2
  }
}

const popUp_1 = () => {
  if(choi.value == 2){
    choi.value = 1
  }
}
</script>

<template>
  <teacher_tabbar :current-index="0"/>
  <view id="topBackGround">
    <view v-if="choice == 0">
      <view id="top">
        <view id="buttonList">
          <view @click="choice_1" style="font-weight: 700">请假审批</view>
          <view @click="choice_2">返校审批</view>
          <view @click="choice_3">超时未归</view>
          <view @click="choice_4">次数排名</view>
        </view>
        <view id="searchBar">
          <uni-search-bar @confirm="search" @input="input" radius="30"></uni-search-bar>
        </view>
      </view>
      <view id="back_ground_1">
        <view>
          <view id="textB">
            <image class="img1" :src="img1"></image>
            <text class="text">
              请假待审批 1 人
            </text>
          </view>
          <view>
            <!-- 普通弹窗 -->
            <uni-popup ref="popup" background-color="#fff" @change="change" border-radius="30px">
              <view id="popBox">
                <view class="popup-content" id="popBox_1">
                  <view id="popText">
                    是否给学生家长发送短信？
                  </view>
                </view>
                <view v-if="choi == 1">
                  <view id="popH1">
                    <view id="popH1_1">
                      <image src="/static/image/teacher_picture/email.png" id="popPicture"></image>
                      <view id="popText_1">需要发送</view>
                    </view>
                    <view id="line"></view>
                    <view>短信示例：家长您好，XX因XX（请假类别）已申请离校，请您知晓。<br>
                      &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp——武汉理工大学党委研究生工作部
                    </view>
                  </view>
                  <view id="popH1_disa" @click="popUp">
                    <view id="popH1_1">
                      <image src="/static/image/teacher_picture/no_email.png" id="popPicture"></image>
                      <view id="popText_1">不需要发送</view>
                    </view>
                    <view id="line_dis"></view>
                    <view>短信示例：家长您好，XX因XX（请假类别）已申请离校，请您知晓。<br>
                      &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp——武汉理工大学党委研究生工作部
                    </view>
                  </view>
                </view>
                <view v-if="choi == 2">
                  <view id="popH1_disa" @click="popUp_1">
                    <view id="popH1_1">
                      <image src="/static/image/teacher_picture/email.png" id="popPicture"></image>
                      <view id="popText_1">需要发送</view>
                    </view>
                    <view id="line_dis"></view>
                    <view>短信示例：家长您好，XX因XX（请假类别）已申请离校，请您知晓。<br>
                      &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp——武汉理工大学党委研究生工作部
                    </view>
                  </view>
                  <view id="popH1">
                    <view id="popH1_1">
                      <image src="/static/image/teacher_picture/no_email.png" id="popPicture"></image>
                      <view id="popText_1">不需要发送</view>
                    </view>
                    <view id="line"></view>
                    <view>短信示例：家长您好，XX因XX（请假类别）已申请离校，请您知晓。<br>
                      &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp——武汉理工大学党委研究生工作部
                    </view>
                  </view>
                </view>
              </view>

            </uni-popup>
          </view>
        </view>
      </view>
      <view id="back_ground_2">
        <view id="background">
          <view id="h1">
            <view id="h1_1">
              <view id="circle">
                <view id="surname">
                  张
                </view>
              </view>
              <view id="name">
                张小白
              </view>
              <view id="studentId">
                2020090911004
              </view>
            </view>
            <view class="words">
              请假类型: 回家
            </view>
            <view class="words">
              申请时间：2022-11-26 17:56:32
            </view>
            <view class="words">
              开始时间：2022-11-26 17:56:32
            </view>
            <view class="words">
              结束时间：2022-11-26 17:56:32
            </view>
            <view id="bottom">
              <view class="words">
                请假理由: 回家取东西取东西取东西取东西取东西取东西取东西取东西取东西取东西取东西取东西取东西
              </view>
            </view>
            <hr>
            <view id="h1_bottom">
              <view id="bottomText">请假待审批</view>
              <view>
                <button id="bt1" @click="open">同意请假</button>   <!-- 在这里 -->
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view v-if="choice == 1">
      <view id="top">
        <view id="buttonList">
          <view @click="choice_1">请假审批</view>
          <view @click="choice_2" style="font-weight: 700">返校审批</view>
          <view @click="choice_3">超时未归</view>
          <view @click="choice_4">次数排名</view>
        </view>
        <view id="searchBar">
          <uni-search-bar @confirm="search" @input="input" radius="30"></uni-search-bar>
        </view>
      </view>
      <view id="back_ground_1">
        <view>
          <view id="textB">
            <image class="img1" :src="img1"></image>
            <text class="text">
              返校待审批 1 人
            </text>
          </view>
        </view>
      </view>
      <view id="buttonList_1">
        <view id="bt1_1">全部</view>
        <view id="bt1_2">已申请返校</view>
        <view id="bt1_2">未申请返校</view>
      </view>
      <view id="back_ground_2">
        <view id="background">
          <view id="h1">
            <view id="h1_1">
              <view id="circle">
                <view id="surname">
                  张
                </view>
              </view>
              <view id="name">
                张小白
              </view>
              <view id="studentId">
                2020090911004
              </view>
            </view>
            <view class="words">
              请假类型: 回家
            </view>
            <view class="words">
              申请时间：2022-11-26 17:56:32
            </view>
            <view class="words">
              开始时间：2022-11-26 17:56:32
            </view>
            <view class="words">
              结束时间：2022-11-26 17:56:32
            </view>
            <view id="bottom">
              <view class="words">
                请假理由: 回家取东西取东西取东西取东西取东西取东西取东西取东西取东西取东西取东西取东西取东西
              </view>
            </view>
            <hr>
            <view id="h1_bottom">
              <view id="bottomText">返校待审批</view>
              <view>
                <button id="bt1">同意返校</button>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view id="back_ground_2">
        <view id="background">
          <view id="h1_h">
            <view id="h1_1">
              <view id="circle">
                <view id="surname">
                  张
                </view>
              </view>
              <view id="name">
                张小白
              </view>
              <view id="studentId">
                2020090911004
              </view>
            </view>
            <view class="words">
              请假类型: 回家
            </view>
            <view class="words">
              申请时间：2022-11-26 17:56:32
            </view>
            <view class="words">
              开始时间：2022-11-26 17:56:32
            </view>
            <view class="words">
              结束时间：2022-11-26 17:56:32
            </view>
            <view id="bottom">
              <view class="words">
                请假理由: 回家取东西取东西取东西取东西取东西取东西取东西取东西取东西取东西取东西取东西取东西
              </view>
            </view>
            <hr>
            <view id="h1_bottom">
              <view id="bottomText">学生待返校</view>
              <view>
                <button id="bt1">确认返校</button>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view v-if="choice == 2">
      <view id="top">
        <view id="buttonList">
          <view @click="choice_1">请假审批</view>
          <view @click="choice_2">返校审批</view>
          <view @click="choice_3" style="font-weight: 700">超时未归</view>
          <view @click="choice_4">次数排名</view>
        </view>
        <view id="searchBar">
          <uni-search-bar @confirm="search" @input="input" radius="30"></uni-search-bar>
        </view>
      </view>
      <view id="back_ground_1">
        <view>
          <view id="textB">
            <image class="img1" :src="img1"></image>
            <text class="text">
              超过请假/延期返校结束时间还未返校 1 人
            </text>
          </view>
        </view>
      </view>
      <view id="buttonList_1">
        <view id="bt1_1">全部</view>
        <view id="bt1_2">已申请返校</view>
        <view id="bt1_2">未申请返校</view>
      </view>
      <view id="back_ground_2">
        <view id="background">
          <view id="h1">
            <view id="h1_1">
              <view id="circle">
                <view id="surname">
                  张
                </view>
              </view>
              <view id="name">
                张小白
              </view>
              <view id="studentId">
                2020090911004
              </view>
            </view>
            <view class="words">
              请假类型: 回家
            </view>
            <view class="words">
              申请时间：2022-11-26 17:56:32
            </view>
            <view class="words">
              开始时间：2022-11-26 17:56:32
            </view>
            <view class="words" style="color:red">
              结束时间：2022-11-26 17:56:32
            </view>
            <view id="bottom">
              <view class="words">
                请假理由: 回家取东西取东西取东西取东西取东西取东西取东西取东西取东西取东西取东西取东西取东西
              </view>
            </view>
            <hr>
            <view id="h1_bottom">
              <view id="bottomText">学生待申请返校</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view v-if="choice == 3">
      <view id="top">
        <view id="buttonList">
          <view @click="choice_1">请假审批</view>
          <view @click="choice_2">返校审批</view>
          <view @click="choice_3">超时未归</view>
          <view @click="choice_4" style="font-weight: 700">次数排名</view>
        </view>
        <view id="searchBar">
          <uni-search-bar @confirm="search" @input="input" radius="30"></uni-search-bar>
        </view>
      </view>
      <view id="back_ground_1">
        <view id="table">
          <view id="textBox">
            <view>排名</view>
            <view>姓名</view>
            <view></view>
            <view>月排名</view>
            <view>总排名</view>
          </view>
          <tr></tr>
          <view id="tableBcakgorund">
            <table cellpadding="24">
              <td>
                <image src="/static/image/teacher_picture/number1.png" id="number1"></image>
              </td>
              <td>
                <view id="table_1">
                  <view id="circle_1">
                    <view id="surname_1">
                      唐
                    </view>
                  </view>
                  &nbsp&nbsp唐秀兰
                </view>
              </td>
              <td>10</td>
              <td>60</td>
              <tr></tr>
              <td>
                <image src="/static/image/teacher_picture/number2.png" id="number1"></image>
              </td>
              <td>
                <view id="table_1">
                  <view id="circle_1">
                    <view id="surname_1">
                      贺
                    </view>
                  </view>
                  &nbsp&nbsp贺涛
                </view>
              </td>
              <td>10</td>
              <td>60</td>
              <tr></tr>
              <td>
                <image src="/static/image/teacher_picture/number3.png" id="number1"></image>
              </td>
              <td>
                <view id="table_1">
                  <view id="circle_1">
                    <view id="surname_1">
                      赵
                    </view>
                  </view>
                  &nbsp&nbsp赵三金
                </view>
              </td>
              <td>10</td>
              <td>60</td>
              <tr></tr>
              <td>
                <view id="numberBox">4</view>
              </td>
              <td>
                <view id="table_1">
                  <view id="circle_1">
                    <view id="surname_1">
                      徐
                    </view>
                  </view>
                  &nbsp&nbsp徐坤
                </view>
              </td>
              <td>10</td>
              <td>60</td>
              <tr></tr>
              <td>
                <view id="numberBox">5</view>
              </td>
              <td>
                <view id="table_1">
                  <view id="circle_1">
                    <view id="surname_1">
                      笑
                    </view>
                  </view>
                  &nbsp&nbsp笑川
                </view>
              </td>
              <td>10</td>
              <td>60</td>
              <tr></tr>
              <td>
                <view id="numberBox">7</view>
              </td>
              <td>
                <view id="table_1">
                  <view id="circle_1">
                    <view id="surname_1">
                      唐
                    </view>
                  </view>
                  &nbsp&nbsp唐秀兰
                </view>
              </td>
              <td>10</td>
              <td>60</td>
              <tr></tr>
              <td>
                <view id="numberBox">8</view>
              </td>
              <td>
                <view id="table_1">
                  <view id="circle_1">
                    <view id="surname_1">
                      唐
                    </view>
                  </view>
                  &nbsp&nbsp唐秀兰
                </view>
              </td>
              <td>10</td>
              <td>60</td>
              <tr></tr>
              <td>
                <view id="numberBox">6</view>
              </td>
              <td>
                <view id="table_1">
                  <view id="circle_1">
                    <view id="surname_1">
                      唐
                    </view>
                  </view>
                  &nbsp&nbsp唐秀兰
                </view>
              </td>
              <td>10</td>
              <td>60</td>
              <tr></tr>
              <td>
                <view id="numberBox">9</view>
              </td>
              <td>
                <view id="table_1">
                  <view id="circle_1">
                    <view id="surname_1">
                      唐
                    </view>
                  </view>
                  &nbsp&nbsp唐秀兰
                </view>
              </td>
              <td>10</td>
              <td>60</td>
              <tr></tr>
              <td>
                <view id="numberBox">10</view>
              </td>
              <td>
                <view id="table_1">
                  <view id="circle_1">
                    <view id="surname_1">
                      唐
                    </view>
                  </view>
                  &nbsp&nbsp唐秀兰
                </view>
              </td>
              <td>10</td>
              <td>60</td>
            </table>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped>
#topBackGround {
  width: 100%;
}

#tableBcakgorund {
  background-color: #ffffff;
  box-shadow: 0 2px 4px #c8c7cc;
  margin-bottom: 100px;
  border-radius: 20px;
}

#top {
  width: 100%;;
  height: 150px;
  border-radius: 0 0 20px 20px;
  background: #2264ff;
}

#top_1 {
  height: 20px;
  width: 100%;
  background: #2264ff;
}

#table {
  width: 360px;
}

#buttonList {
  display: flex;
  justify-content: space-around;
  color: #f8f8f8;
  font-weight: 300;
  margin-bottom: -20px;
  position: relative;
  top: 40px;
}

#bt1 {
  width: 90px;
  height: 35px;
  color: #f8f8f8;
  font-size: 14px;
  text-align: center;
  border-radius: 35px;
  background: #2264ff;
  margin-top: 15px;
  margin-right: 10px;
}

#searchBar {
  margin-top: 80px;
}

#back_ground_1 {
  display: flex;
  justify-content: center;
}

#textB {
  width: 345px;
  height: 25px;
  padding: 10px;
  border-radius: 0 0 12px 12px;
  background: linear-gradient(180.00deg, #f2e3ac 0%, #fffae7 100%);
  margin-top: 0px;
}

.text {
  font-weight: 400;
  font-size: 14px;
  text-align: left;
  color: #313133;
  padding: 6px;
}

.img1 {
  width: 15px;
  height: 15px;
  background: transparent;
  margin-top: 4px;
}

#back_ground_2 {
  display: flex;
  justify-content: center;
  margin-top: 50px;
}

#background {
  display: flex;
  justify-content: center;
}

#background_2 {
  display: flex;
  justify-content: center;
}

#h1 {
  width: 360px;
  height: 270px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 4px #c8c7cc;
  padding: 10px;
  margin-top: -40px;
}

#h1_h {
  width: 360px;
  height: 270px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 4px #c8c7cc;
  padding: 10px;
  margin-top: -40px;
  margin-bottom: 100px;
}

#h2 {
  font-weight: 400;
  font-size: 14px;
  text-align: right;
  color: #999;
  position: relative;
  bottom: -400px;
}

#h1_1 {
  display: flex;
  justify-content: space-between;
}

#circle {
  width: 45px;
  height: 45px;
  border-radius: 45px;
  background-color: #2264ff;
}

#surname {
  color: #f8f8f8;
  text-align: center;
  margin-top: 9px;
  margin-left: 0.5px;
  font-weight: 700;
  font-size: 18px;
}

#name {
  font-weight: 700;
  font-size: 17px;
  text-align: left;
  color: #1a1a1a;
  margin-top: 10px;
  margin-left: -100px;
}

#studentId {
  color: #999999;
  font-weight: 400;
  font-size: 16px;
  margin-top: 10px;
  margin-right: 10px;
}

.words {
  margin-top: 5px;
  font-weight: 400;
  font-size: 14px;
  text-align: left;
  color: #808080;
}

#bottom {
  display: flex;
  margin-bottom: 20px;
}

#picture {
  width: 20px;
  height: 20px;
  margin-top: 5px;
}

#words_1 {
  margin-top: 5px;
  margin-left: 5px;
  font-weight: 400;
  font-size: 13px;
  text-align: right;
  color: #2264ff;
}

.words {
  margin-top: 5px;
  font-weight: 400;
  font-size: 14px;
  text-align: left;
  color: #808080;
}

#h1_bottom {
  display: flex;
  justify-content: space-between;
}

#bottomText {
  margin-top: 16px;
  font-weight: 400;
  font-size: 18px;
  text-align: left;
  color: #ff8214;
  margin-left: 10px;
}

#buttonList_1 {
  margin-top: 10px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-around;
}

#bt1_1 {
  width: 64px;
  height: 26px;
  border-radius: 13px;
  background: #fff;
  border: 1px solid #2264ff;
  color: #2264ff;
  text-align: center;
}

#bt1_2 {
  width: 106px;
  height: 26px;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 2px 4px #c8c7cc;
  text-align: center;
}

#number1 {
  width: 30px;
  height: 30px;
}

#circle_1 {
  width: 30px;
  height: 30px;
  border-radius: 30px;
  background-color: #2264ff;
}

#surname_1 {
  color: #f8f8f8;
  text-align: center;
  margin-top: 3px;
  margin-left: 0.5px;
  font-weight: 700;
  font-size: 16px;
}

#table_1 {
  display: flex;
  justify-content: left;
}

#textBox {
  color: #3a3a3a;
  font-size: 14px;
  margin-top: 10px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-around;
}

#numberBox {
  text-align: center;
}

#popBox {
  width: 345px;
  height: 330px;
  border-radius: 20px;
  padding: 10px;
}

#popBox_1 {
  display: flex;
  justify-content: center;
}

#popText {
  font-weight: 700;
  font-size: 18px;
  text-align: center;
  color: #1a1a1a;
}

#popPicture {
  height: 30px;
  width: 30px;
}

#popH1 {
  border: 2px solid #2264ff;
  border-radius: 10px;
  height: 100px;
  margin-top: 20px;
  padding: 10px;
}

#popH1_disa {
  border: 2px solid #3B4144;
  border-radius: 10px;
  height: 100px;
  margin-top: 20px;
  padding: 10px;
}

#popH1_1 {
  display: flex;
  justify-content: left;
}

#popText_1 {
  font-weight: 700;
  font-size: 16px;
  text-align: center;
  color: #1a1a1a;
}

#line {
  width: 100%;
  height: 0px;
  border: 1px dashed #2264ff;
}

#line_dis {
  width: 100%;
  height: 0px;
  border: 1px dashed #3B4144;
}
</style>